<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            border: 1px solid;
            float: left;
            margin-left: 20px;
            text-align: center;
            line-height: 200px;
        }

        .box1 {
            background-image: linear-gradient(red, green, blue);
        }

        .box2 {
            background-image: linear-gradient(to right top, red, green, blue);
        }

        .box3 {
            background-image: linear-gradient(20deg, red, green, blue);
        }

        /* 到高度50的时候，必须变成纯红，到100必须变成纯绿，到150必须变成纯蓝色 */
        .box4 {
            background-image: linear-gradient(red 50px, green 100px, blue 150px);
        }

        .box5 {
            background-image: linear-gradient(20deg, red 50px, green 100px, blue 150px);
            font-size: 100px;
            color: transparent;
            font-weight: bold;
            border: 1px solid rebeccapurple;
            background-clip: text;
        }
    </style>
</head>
<body>

    <div class="box box1">默认情况从上到下</div>
    <div class="box box2">从左往右</div>
    <div class="box box3">20度角</div>
    <div class="box box4">设置渐变的距离</div>
    <div class="box box5">你好啊</div>
    
</body>
</html>